<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试设置</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gray-900 text-white min-h-screen">
    <!-- 顶部导航栏 -->
    <div class="bg-gray-800 px-4 py-3 pt-12 flex items-center">
        <!-- // 去掉点击返回首页的 单击事件 onclick="goToHome()"-->
        <button class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center mr-4 hover:bg-gray-600 transition-all">
            <i class="fas fa-arrow-left"></i>
        </button>
        <h1 class="text-xl font-bold flex-1">测试设置</h1>
    </div>

    <!-- 设置内容 -->
    <div class="p-4 space-y-4">
        <!-- 上电等待时长 -->
        <div class="bg-gray-800 rounded-xl p-4 ">
            <div class="flex items-center mb-3">
                <i class="fas fa-hourglass-half text-orange-400 mr-3"></i>
                <h3 class="text-lg font-semibold">上电等待时长</h3>
            </div>
            
            <div class="space-y-3">
                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-300">等待启动时间</span>
                    <span class="text-orange-400 font-semibold" id="waitDuration">20秒</span>
                </div>
                <input type="range" min="5" max="30" value="20" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider" id="waitSlider">
                <div class="flex justify-between text-xs text-gray-400">
                    <span>5秒</span>
                    <span>30秒</span>
                </div>
            </div>
        </div>

        <!-- 程控电源连接设置 -->
        <div class="bg-gray-800 rounded-xl p-4 ">
            <div class="flex items-center mb-3">
                <i class="fas fa-plug text-red-400 mr-3"></i>
                <h3 class="text-lg font-semibold">程控电源连接</h3>
            </div>
            
            <div class="space-y-3">
                <div>
                    <label class="block text-sm text-gray-300 mb-2">IP地址</label>
                    <input type="text" placeholder="192.168.1.100" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 focus:border-blue-400 focus:outline-none" value="192.168.1.100">
                </div>
                
                <div class="flex space-x-2">
                    <button class="flex-1 bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition-all">
                        <i class="fas fa-wifi mr-2"></i>连接测试
                    </button>
                    <div class="flex items-center px-3">
                        <div class="status-dot status-connected"></div>
                        <span class="text-sm text-green-400">已连接</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 高级设置 -->
        <div class="bg-gray-800 rounded-xl p-4 ">
            <div class="flex items-center mb-3">
                <i class="fas fa-cogs text-yellow-400 mr-3"></i>
                <h3 class="text-lg font-semibold">高级设置</h3>
            </div>
            
            <div class="space-y-3">
                <div class="flex items-center justify-between">
                    <span class="text-sm">自动保存视频</span>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" class="sr-only peer" checked>
                        <div class="w-11 h-6 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                    </label>
                </div>
                
                <div class="flex items-center justify-between">
                    <span class="text-sm">失败时自动重试</span>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" class="sr-only peer">
                        <div class="w-11 h-6 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                    </label>
                </div>
                
                <div class="flex items-center justify-between">
                    <span class="text-sm">声音提醒</span>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" class="sr-only peer" checked>
                        <div class="w-11 h-6 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                    </label>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部保存按钮 -->
    <div class="p-4 pb-8">
        <button class="w-full bg-blue-600 hover:bg-blue-700 py-3 rounded-xl font-semibold transition-all">
            <i class="fas fa-save mr-2"></i>保存设置
        </button>
    </div>

    <!-- 自定义弹窗 -->
    <div id="customAlert" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
        <div class="bg-gray-800 rounded-xl p-6 max-w-xs w-full mx-4 slide-up">
            <div class="text-center mb-4">
                <div id="alertTitle" class="text-xl font-bold mb-2">提示</div>
                <div id="alertMessage" class="text-sm text-gray-300">操作成功</div>
            </div>
            <div class="flex justify-center space-x-4 mt-4">
                <button id="alertConfirm" class="px-4 py-2 bg-blue-600 rounded-lg text-sm font-medium hover:bg-blue-500 transition-all">确定</button>
            </div>
        </div>
    </div>

    <script>
        // 返回主页函数
        function goToHome() {
            if (window.parent && window.parent.showPage) {
                window.parent.showPage('home');
            } else {
                window.location.href = 'home.html';
            }
        }
        
        // 滑块控制
        const waitSlider = document.getElementById('waitSlider');
        const waitDuration = document.getElementById('waitDuration');

        waitSlider.addEventListener('input', function() {
            waitDuration.textContent = this.value + '秒';
        });

        // 自定义弹窗函数
        function showAlert(title, message, callback) {
            document.getElementById('alertTitle').textContent = title;
            document.getElementById('alertMessage').textContent = message;
            
            const alertElement = document.getElementById('customAlert');
            const confirmBtn = document.getElementById('alertConfirm');
            
            alertElement.classList.remove('hidden');
            
            confirmBtn.onclick = function() {
                alertElement.classList.add('hidden');
                if (callback) callback();
            };
        }

        // 保存按钮动画和弹窗 - 修改后的更健壮版本
        function setupSaveButton() {
            // 使用更精确的选择器，确保只选择底部保存按钮
            const saveButton = document.querySelector('.p-4.pb-8 button');
            
            if (saveButton) {
                saveButton.addEventListener('click', function(event) {
                    // 阻止事件冒泡和默认行为
                    event.preventDefault();
                    event.stopPropagation();
                    
                    const originalText = this.innerHTML;
                    this.innerHTML = '<i class="fas fa-spinner spin-animation mr-2"></i>保存中...';
                    this.disabled = true;
                    
                    // 模拟保存操作，随机成功或失败
                    setTimeout(() => {
                        const isSuccess = Math.random() > 0.3; // 70%概率成功
                        
                        if (isSuccess) {
                            this.innerHTML = '<i class="fas fa-check mr-2"></i>保存成功';
                            showAlert('保存成功', '设置已成功保存', () => {
                                this.innerHTML = originalText;
                                this.disabled = false;
                            });
                        } else {
                            this.innerHTML = '<i class="fas fa-times mr-2"></i>保存失败';
                            showAlert('保存失败', '设置保存失败，请重试', () => {
                                this.innerHTML = originalText;
                                this.disabled = false;
                            });
                        }
                    }, 1500);
                });
                console.log('保存按钮事件已绑定');
            } else {
                console.error('未找到保存按钮');
            }
        }

        // 确保DOM完全加载后再绑定事件
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', setupSaveButton);
        } else {
            setupSaveButton();
        }
    </script>
</body>
</html>